<template>
  <div>
    <label
      :class="{
        changeAnimate: isChangeAnimate,
        resertAnimate: !isChangeAnimate,
      }"
      >{{ info.label }}</label
    >
    <input
      :type="info.type ? info.type : 'text'"
      @focus="isChangeAnimate = true"
      @blur="resetStyle"
      v-model="info.val"
    />
    <i> {{ info.right }} </i>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isChangeAnimate:this.info.val == '' ? false : true,
    };
  },
  props: {
    info: {
      type: Object,
    },
  },
   methods: {
        resetStyle(){
            if(this.info.val != ""){
                return
            }
            this.isChangeAnimate = false
        },
    
    },
};
</script>
<style lang="scss" scoped>
div {
  height: 70px;
  width: 100%;
  position: relative;
  label {
    position: absolute;
    bottom: 10px;
    font-size: 16px;
  }
  input {
    width: 100%;
    height: 40px;
    border: none;
    border-bottom: 1px solid #888;
    background: transparent;
    position: absolute;
    bottom: 0px;
    &:hover {
      outline: none;
      border-bottom: 2px solid pink;
      transition: 0.5s;
    }
  }
  i {
    position: absolute;
    top: 2.5rem;
    right: 0px;
    color: $starbucks-color;
  }
}
.changeAnimate {
  bottom: 40px;
  font-size: 12px;
  transition: 0.5s;
}
.resetAnimate {
  bottom: 10px;
  font-size: 16px;
  transition: 0.5s;
}
</style>